import React from 'react'
import clsx from 'clsx'
import Link from '@docusaurus/Link'
import {
  useThemeConfig,
  type FooterLinkItem,
} from '@docusaurus/theme-common'
import useBaseUrl from '@docusaurus/useBaseUrl'
import styles from './styles.module.css'
import { SendEmail } from '@icon-park/react'
import { translate } from '@docusaurus/Translate'

const email = 'polyos@iscas.cn'

export interface FooterLinkProps {
  [key: string]: any
  to: string
  label: string
  href: string
  prependBaseUrlToHref: boolean
}

function FooterLink({
  to,
  href,
  label,
  prependBaseUrlToHref,
  ...props
}: FooterLinkProps) {
  const toUrl = useBaseUrl(to)
  const normalizedHref = useBaseUrl(href, {
    forcePrependBaseUrl: true,
  })
  return (
    <Link
      className="footer__link-item"
      {...(href
        ? {
            target: '_blank',
            rel: 'noopener noreferrer',
            href: prependBaseUrlToHref ? normalizedHref : href,
          }
        : {
            to: toUrl,
          })}
      {...props}>
      {label}
    </Link>
  )
}

interface FooterLogoProps {
  url: string
  alt: string
}

const FooterLogo = ({ url, alt }: FooterLogoProps) => (
  <img loading="lazy" className="footer__logo" alt={alt} src={url} />
)

function Footer() {
  const { footer } = useThemeConfig()
  const {
    copyright,
    links = [],
    logo = { src: undefined, alt: '' },
  } = footer ?? {}
  const logoUrl = useBaseUrl(logo.src)

  if (!footer) {
    return null
  }

  return (
    <footer
      className={clsx('footer', {
        'footer--dark': footer.style === 'dark',
      })}>
      <div className="container">
        <img
          src={useBaseUrl('/img/full-logo-en.png')}
          className="code"
          alt=""
        />

        <div className="row row--no-gutters">
          <div className="col col--4">
            <div className="row row--no-gutters">
              {logo && logo.src && (
                <div
                  className={clsx(
                    'footer__logo-ctr',
                    styles.footer_logo
                  )}>
                  {logo.href ? (
                    <a
                      href={logo.href}
                      target="_blank"
                      rel="noopener noreferrer"
                      className={styles.footerLogoLink}>
                      <FooterLogo
                        alt={logo.alt ?? ''}
                        url={logoUrl}
                      />
                    </a>
                  ) : (
                    <FooterLogo alt={logo.alt ?? ''} url={logoUrl} />
                  )}
                </div>
              )}
            </div>

            <div
              className={clsx('row row--no-gutters', styles.email)}>
              <SendEmail
                className={clsx(styles.email_icon)}
                theme="multi-color"
                size="25"
                fill={['#4a90e2', '#f5a623', '#FFF', '#43CCF8']}
              />
              <span>
                {translate({
                  id: 'theme.Footer.email.text',
                  message: 'Contact us',
                  description: 'the title of this site',
                })}
                :
              </span>
              <a
                className={styles.email_text}
                href={`mailto:${email}`}>
                {email}
              </a>
            </div>
          </div>
          <div className="col col--8">
            {links && links.length > 0 && (
              <div className="row row--no-gutters footer__links">
                {links.map(
                  (
                    linkItem:
                      | {
                          title: string
                          items: FooterLinkItem[]
                        }
                      | FooterLinkItem,
                    i
                  ) => (
                    <div key={i} className="col col--4 footer__col">
                      {linkItem.title != null ? (
                        <h4 className="footer__title">
                          {linkItem.title as string}
                        </h4>
                      ) : null}
                      {linkItem.items != null &&
                      Array.isArray(linkItem.items) &&
                      linkItem.items.length > 0 ? (
                        <ul
                          className={clsx(
                            'footer__items',
                            styles.footer_ul
                          )}>
                          {linkItem.items.map((item, key) =>
                            item.html ? (
                              <li
                                key={key}
                                className="footer__item" // Developer provided the HTML, so assume it's safe.
                                dangerouslySetInnerHTML={{
                                  __html: item.html,
                                }}
                              />
                            ) : (
                              <li
                                key={item.href || item.to}
                                className="footer__item">
                                <FooterLink {...item} />
                              </li>
                            )
                          )}
                        </ul>
                      ) : null}
                    </div>
                  )
                )}
              </div>
            )}
          </div>
        </div>
        <div className="row row--no-gutters">
          <div className="col">
            {copyright ? (
              <div
                className={clsx(
                  'footer__copyright',
                  styles.footer_copyright
                )} // Developer provided the HTML, so assume it's safe.
                dangerouslySetInnerHTML={{
                  __html: copyright,
                }}
              />
            ) : null}
          </div>
        </div>
      </div>
    </footer>
  )
}

export default Footer
